<template>
  <d2-container>
    <el-row class="mb-10">
      <el-col class="mb-10" :span="24">
        <el-input v-model="keywords" placeholder="可模糊搜索昵称/邮箱"></el-input>
      </el-col>
      <el-col :span="24">
        <el-button @click="userSearch()" type="primary">过滤</el-button>
        <el-button @click="resetUserSearch()" type="warning">取消过滤</el-button>
      </el-col>
    </el-row>

    <el-table class="mb-10" :data="users" style="width: 100%">
      <el-table-column label="ID">
        <template slot-scope="scope">
          <span>{{ scope.row.userid }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机">
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="昵称">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="会员等级">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.level == 0">普通会员</el-tag>
          <el-tag type="warning" v-if="scope.row.level == 1">付费会员</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="管理权限">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.authlevel == 0">无权限</el-tag>
          <el-tag type="warning" v-if="scope.row.authlevel == 1">管理员</el-tag>
          <el-tag type="info" v-if="scope.row.authlevel == 2">主播</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="注册时间">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.ut }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24">
        <el-pagination
          background
          layout="total, prev, pager, next"
          @current-change="handleCurrentChange"
          :total="total"
          :current-page="page"
          :page-size="page_size"
        ></el-pagination>
      </el-col>
    </el-row>
  </d2-container>
</template>

<script>
import request from "@/plugin/axios";
export default {
  created() {
    this.getUsers();
  },
  data() {
    return {
      users: [],
      page: 1,
      page_size: 10,
      total: 0,
      keywords: ""
    };
  },
  methods: {
    getUsers() {
      request
        .get(`/users?keywords=${this.keywords}`)
        .then(res => {
          res = res.data;
          this.users = res.users;
          this.page = res.page;
          this.page_size = res.page_size;
          this.total = res.total;
        })
        .catch(res => {
          this.$message.warning("无法获取数据");
        });
    },
    handleEdit(index, row) {
      this.$router.push({
        name: "member-edit",
        params: {
          id: row.userid
        }
      });
    },
    handleCurrentChange() {
      this.getUsers();
    },
    userSearch() {
      this.getUsers();
    },
    resetUserSearch() {
      this.keywords = "";
      this.userSearch();
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/style/diy.scss";
</style>
